<!--
 * @Author: Scrooge yu844856744@qq.com
 * @Date: 2023-04-10 10:58:21
 * @LastEditors: Scrooge yu844856744@qq.com
 * @LastEditTime: 2023-05-16 15:15:58
 * @FilePath: /seehoo-design-plus/src/components/sh-button-list/button-list.vue
 * @Description: button-list新增show属性
-->
<template>
  <div :class="prefixCls" :style="{ 'justify-content': flex, 'margin-bottom': `${marginBottom}px` }">
    <div :class="`${prefixCls}-item`" v-for="(item, index) in getBtnList" :key="index">
      <Button v-bind="getBindValues($attrs, item)" @click="item.onClick">{{ item.label }}</Button>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useComputed } from './utils/useComputed';
import { useType } from '../../utils/useType';

const prefixCls = 'sh-btn-list';
const props = defineProps({
  btnList: {
    type: Array,
    default: () => {
      return [];
    },
  },
  marginBottom: {
    type: Number,
    default: 0,
  },
  flex: {
    type: String,
    default: 'flex-end',
  },
});

const { isType } = useType();

const { getBindValues } = useComputed();

const getBtnList = computed(() => {
  return props.btnList.filter(item => {
    if (!item.hasOwnProperty('show')) {
      item.show = true;
    }
    if (isType(item.show, 'Function')) {
      return item.show();
    }
    return item.show;
  });
});
</script>
